<template>
    <div class="app-container">
        <el-card class="selsctCard">
            <div class="headBox">
                <div
                    class="headValue"
                    :class="item.dictValue === listValue ? 'bckColr' : ''"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="titleCahnge(item)"
                >
                    <span>{{ item.name }}</span>
                    <span>(</span>
                    <span>{{ item.value }}</span>
                    <span>)</span>
                </div>
            </div>
        </el-card>
        <div v-loading="loading">
            <SearchForm
                @reset="resetQuery"
                @search="handleQuery"
                ref="searchForm"
            >
                <el-form-item label="客户名称:" prop="customName">
                    <el-input
                        v-model="queryParams.customName"
                        placeholder="请输入客户名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="所属公司:">
                    <el-select
                        v-model="queryParams.companyId"
                        placeholder="请选择公司"
                        clearable
                    >
                        <el-option
                            v-for="item in deptList.company"
                            :label="item.deptName"
                            :value="item.deptId"
                            :key="item.deptId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item
                    label="业务类型:"
                    prop="category"
                    v-if="listValue !== ''"
                >
                    <el-select
                        v-model="queryParams.businessType"
                        placeholder="请选择状态"
                        clearable
                    >
                        <el-option
                            v-for="item in business_type"
                            :label="item.label"
                            :value="item.value"
                            :key="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="业务单号:" prop="businessId">
                    <el-input
                        v-model="queryParams.businessId"
                        placeholder="请输入业务单号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="业务名称:" prop="businessName">
                    <el-input
                        v-model="queryParams.businessName"
                        placeholder="请输入业务名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="产品类型:" prop="post">
                    <el-select
                        v-model="queryParams.post"
                        placeholder="请选择产品类型"
                        clearable
                    >
                        <el-option
                            v-for="item in dict.type.quota_rent_type"
                            :label="item.label"
                            :value="item.value"
                            :key="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="渠道/自营:">
                    <el-select
                        v-model="queryParams.operateType"
                        placeholder="请选择渠道/自营"
                        clearable
                    >
                        <el-option
                            v-for="item in dict.type.business_type"
                            :label="item.label"
                            :value="item.value"
                            :key="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </SearchForm>

            <div class="card-wrap card-padding">
                <div class="table-title-wrap justify-end">
                    <el-button
                        type=""
                        icon="el-icon-upload2"
                        size="mini"
                        @click="exportFile"
                        v-hasPermi="['flowable:examine:cclist:list:export']"
                        >导出</el-button
                    >
                </div>
                <div class="tableBox">
                    <el-table
                        :key="listValue"
                        fit
                        :data="definitionList"
                        border
                        v-if="tableCloumns.length > 0"
                    >
                        <el-table-column label="操作" width="60" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    @click="handleReadImage(scope.row, '1')"
                                    type="text"
                                    size="small"
                                    v-hasPermi="[
                                        'flowable:examine:cclist:list:look',
                                    ]"
                                    >查看</el-button
                                >
                                <!-- <el-button -->
                                <!-- v-if="scope.row.processStatus !== 2" -->
                                <!-- @click="handleReadImage(scope.row, '2')" -->
                                <!-- type="text" -->
                                <!-- size="small" -->
                                <!-- v-hasPermi="['system:deployment:remove']" -->
                                <!-- >审核</el-button -->
                                <!-- > -->
                                <!-- <el-button -->
                                <!-- v-if=" -->
                                <!-- scope.row.claimStatus == 0 && -->
                                <!-- scope.row.processStatus !== 2 -->
                                <!-- " -->
                                <!-- @click="handleReadImage(scope.row)" -->
                                <!-- type="text" -->
                                <!-- size="small" -->
                                <!-- v-hasPermi="['system:deployment:remove']" -->
                                <!-- >认领</el-button -->
                                <!-- > -->
                            </template>
                        </el-table-column>
                        <TableCloumn
                            v-for="item in tableCloumns"
                            :cellOptions="item"
                        ></TableCloumn>
                    </el-table>

                    <pagination
                        v-show="total > 0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as apis from "@/api/flowable/examine/cclist/api.js";
import { getApprovalList } from "@/api/flowable/approval";
import SearchContent from "@/components/SearchContent/index.vue";
import { getDicts } from "@/api/system/dict/data.js";
import Cookies from "js-cookie";
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
export default {
    name: "CClist",
    dicts: [
        "sys_process_category",
        "expense_business_type",
        "quota_rent_type",
        "bus_flow_type",
        "business_type",
        "work_order_type",
        "template_classification",
        "other_contract_template_type",
        "contract_template_edit_type",
        "rental_purpose",
        "return_car_type",
        "external_business_type",
        "external_perfect_type",
        "quota_source_business"
    ],
    components: {
        SearchContent,
        TableCloumn,
    },

    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 流程定义表格数据
            definitionList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: Cookies.get("userId"),
                category: null,
                businessType: "",
                businessId: null,
            },
            formQueryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 挂载表单到流程实例
            formDeployParam: {
                formId: null,
                deployId: null,
            },
            deployId: "",
            // xml
            flowData: {},
            listValue: "",
            list: [
                // {
                //     name: "全部",
                //     value: "0",
                //     index: "-1",
                //     state: true,
                // },
                // {
                //     name: "费用报销",
                //     value: "1",
                //     index: "1",
                //     state: false,
                // },
            ],
            business_type: [],
            dictType: "",
            dicts: {
                claimStatusList: [
                    {
                        label: "未认领",
                        value: "0",
                    },
                    {
                        label: "已认领",
                        value: "1",
                    },
                ],
            },
            tableCloumns: [],
            deptList: {
                company: [], //公司
                department: [], // 组织
            },
        };
    },
    async created() {
        try {
            this.loading = true;
            this.busFlowTypeList = await this._getDicts("bus_flow_type");
            this.initDeptList();
            this.init();
            this.getList();
        } catch {
            throw new Error("Error");
        }
        // this.$set(this.queryParams, "id", Cookies.get("userId"));
        // this.setTabloCloumns(this.listValue);
        // this.getList();
        // getDicts("bus_flow_type").then((res) => {
        //     let obj = {
        //         name: "全部",
        //         value: 10,
        //         state: true,
        //     };
        // });
    },
    activated(){
        this.initDeptList();
        this.init();
        this.getList();
    },
    mounted() {},
    methods: {
        initDeptList() {
            this.getDeptList(1);
            this.getDeptList(2);
        },
        getDeptList(deptType) {
            let params = {
                deptType,
            };
            apis.DeptList(params).then((res) => {
                if (res.code == 200) {
                    switch (deptType) {
                        case 1:
                            this.deptList.department = res?.data ?? [];
                            break;
                        case 2:
                            this.deptList.company = res?.data ?? [];
                            break;
                    }
                }
            });
        },
        async init(flag = "3") {
            await this.getList_task(flag);
            // this.$set(this.queryParams, "id", Cookies.get("userId"));
            this.setTabloCloumns();
        },
        getList_task(flag) {
            return new Promise((resolve, reject) => {
                this.list = [];
                let params = {
                    flag,
                    auditStatus: this.queryParams.auditStatus,
                };
                apis?.List_task(params)
                    .then((res) => {
                        if (!res?.rows || res?.rows?.length == 0) {
                            this.list.push({
                                name: "全部",
                                value: 0,
                                dictValue: "",
                            });
                        } else {
                            res?.rows?.map((item) => {
                                if (item.category == "total") {
                                    this.list.push({
                                        name: "全部",
                                        value: item.value,
                                        dictValue: "",
                                    });
                                } else {
                                    let ele = this.busFlowTypeList.find((e) => {
                                        return item.category == e.dictValue;
                                    });
                                    if (ele) {
                                        this.list.push({
                                            name: ele.dictLabel,
                                            value: item.value,
                                            dictValue: ele.dictValue,
                                        });
                                    }
                                }
                            });
                        }

                        resolve(res.data);
                    })
                    .catch(() => {
                        resolve([]);
                    });
            });
        },
        exportFile() {
            if (!apis?.ExportFile) return;

            let params = {
                ...this.queryParams,
                dictType: this.listValue ? this.dictType : "",
                exportFlag: "3",
            };
            delete params.pageNum;
            delete params.pageSize;
            this.download(
                apis?.ExportFile,
                params,
                `抄送列表_${new Date().getTime()}.xlsx`
            );
        },
        // 按钮切换
        titleCahnge({ name, value, dictValue }) {
            console.log(dictValue, "dictValue");
            this.listValue = dictValue;
            this.queryParams.businessType = "";
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.$refs.searchForm.resize();
            this.queryParams.category = dictValue;
            this.setDict();
            this.setTabloCloumns(dictValue);
            this.getList();
        },
        setDict() {
            console.log(typeof this.listValue);
            switch (this.listValue) {
                case "3": // 费用报销
                    this.business_type = this.dict.type.expense_business_type;
                    this.dictType = "expense_business_type";
                    break;
                case "29": // 合同模板
                    this.business_type = this.dict.type.template_classification;
                    this.dictType = "template_classification";
                    break;
                case "30": // 其他合同模板
                    this.business_type =
                        this.dict.type.other_contract_template_type;
                    this.dictType = "other_contract_template_type";
                    break;
                case "28": // 合同模板修改申请
                    this.business_type =
                        this.dict.type.contract_template_edit_type;
                    this.dictType = "contract_template_edit_type";
                    break;
                case "2": // 信审流程
                    this.business_type = this.dict.type.rental_purpose;
                    this.dictType = "rental_purpose";
                    break;
                case "36": // 订单还车
                    this.business_type = this.dict.type.return_car_type;
                    this.dictType = "return_car_type";
                    break;
                case "41": // 外部转租赁业务类型
                    this.business_type = this.dict.type.external_business_type;
                    this.dictType = "external_business_type";
                    break;
                case "42": // 外部转租赁信息完善业务
                    this.business_type = this.dict.type.external_perfect_type;
                    this.dictType = "external_perfect_type";
                    break;
                case "4":
                case "5":
                case "6":
                    this.business_type = this.dict.type.work_order_type;
                    this.dictType = "work_order_type";
                    break;
                default:
                    this.business_type = [];
                    this.dictType = "";
                    break;
            }
        },
        setTabloCloumns() {
            switch (this.listValue) {
                case "": // 全部
                    this.setTabloCloumns_0();
                    break;
                // case "3": // 费用报销
                //     this.setTabloCloumns_1();
                //     break;
                default:
                    this.setTabloCloumns_1();
                    break;
            }
        },
        translateDict(dict, value) {
            let word = "-";
            let result = [];
            let prop = value?.split?.(",");
            dict?.map((item) => {
                if (prop?.includes(item.value ?? item.dictValue)) {
                    result.push(item.label ?? item.dictLabel);
                }
            });
            word = result && result?.join("/");

            return word;
        },
        // 全部
        setTabloCloumns_0() {
            this.business_type = [];
            this.tableCloumns = [
                {
                    label: "审核类型",
                    prop: "category",
                    minWidth: "150px",
                    type: "dict",
                    dict: this.dict.type.bus_flow_type,
                },
                {
                    label: "所属公司",
                    prop: "companyName",
                },
                {
                    label: "客户名称",
                    prop: "customName",
                },
                {
                    label: "车牌号",
                    prop: "carNo",
                },
                {
                    label: "产品类型",
                    prop: "productType",
                    format: row => {
							if (this.notEmpty(row.productType)) {
								if (isNaN(row.productType * 1)) {
									return row.productType;
								} else {
									console.log(item)
									let item =
										this.dict.type?.quota_rent_type?.find(
											e => e.value == row.productType,
										);
									return item.label;
								}
							} else {
								return '-';
							}
						},
                },
                {
                    label: "渠道/自营",
                    prop: "operateType",
                    format: (row) => {
                        if (this.notEmpty(row.operateType)) {
                            if (isNaN(row.operateType * 1)) {
                                return row.operateType;
                            } else {
                                let item =
                                    this.dict.type?.quota_source_business?.find(
                                        (e) => e.value == row.operateType
                                    );
                                return item.label;
                            }
                        } else {
                            return "-";
                        }
                    },
                },
                {
                    label: "所属月份",
                    minWidth: "100px",
                    prop: "businessTime",
                    //   format: (row) => {
                    //     return this._formatTime(row.businessTime, "YYYY-MM");
                    //   },
                },

                {
                    label: "业务单号",
                    prop: "businessId",
                    minWidth: "200px",
                    prototype: {
                        class: "state_orderID",
                    },
                },
                {
                    label: "业务名称",
                    prop: "businessName",
                },
                {
                    label: "审核节点",
                    prop: "taskName",
                    minWidth: "150px",
                },
                {
                    label: "审核状态",
                    minWidth: "150px",
                    prop: "auditStatus",
                    // prototype: {
                    //   class: "state_red",
                    // },
                    // format: (row) => {
                    //   return row?.auditStatus ?? "审核通过";
                    // },
                },
                {
                    label: "发起人",
                    prop: "startUserName",
                },
                {
                    label: "发起时间",
                    prop: "startTime",
                    minWidth: "150px",
                },
                {
                    label: "审核等待时间",
                    prop: "duration",
                    minWidth: "150px",
                },
            ];
        },
        // 费用报销
        setTabloCloumns_1() {
            this.tableCloumns = [
                {
                    label: "审核类型",
                    prop: "category",
                    minWidth: "150px",
                    type: "dict",
                    dict: this.dict.type.bus_flow_type,
                },
                {
                    label: "所属公司",
                    prop: "companyId",
                },
                {
                    label: "客户名称",
                    prop: "customName",
                },
                {
                    label: "车牌号",
                    prop: "carNo",
                },
                {
                    label: "产品类型",
                    prop: "productType",
                    format: row => {
							if (this.notEmpty(row.productType)) {
								if (isNaN(row.productType * 1)) {
									return row.productType;
								} else {
									console.log(item)
									let item =
										this.dict.type?.quota_rent_type?.find(
											e => e.value == row.productType,
										);
									return item.label;
								}
							} else {
								return '-';
							}
						},
                },
                {
                    label: "渠道/自营",
                    prop: "operateType",
                    format: (row) => {
                        if (this.notEmpty(row.operateType)) {
                            if (isNaN(row.operateType * 1)) {
                                return row.operateType;
                            } else {
                                let item =
                                    this.dict.type?.quota_source_business?.find(
                                        (e) => e.value == row.operateType
                                    );
                                return item.label;
                            }
                        } else {
                            return "-";
                        }
                    },
                },
                {
                    label: "所属月份",
                    minWidth: "100px",
                    prop: "businessTime",
                    //   format: (row) => {
                    //     return this._formatTime(row.businessTime, "YYYY-MM");
                    //   },
                },
                // {
                //     label: "业务类型",
                //     prop: "businessType",
                //     type: "select",
                //     selectList: this.business_type,
                //     state: "readonly",
                //       format: (row) => {
                //         if (this.business_type?.length > 0) {
                //           return this.translateDict(
                //             this.business_type,
                //             row.businessType
                //           );
                //         } else {
                //           return row.businessType;
                //         }
                //       },
                // },
                {
                    label: "认领状态",
                    prop: "claimStatusName",
                },
                {
                    label: "业务单号",
                    prop: "businessId",
                    minWidth: "150px",
                    prototype: {
                        class: "state_orderID",
                    },
                },
                {
                    label: "业务名称",
                    prop: "businessName",
                },
                {
                    label: "审核节点",
                    prop: "taskName",
                    minWidth: "150px",
                },
                {
                    label: "审核状态",
                    minWidth: "150px",
                    prop: "auditStatus",
                    // prototype: {
                    //   class: "state_red",
                    // },
                    // format: (row) => {
                    //   return row?.auditStatus ?? "审核通过";
                    // },
                },
                {
                    label: "发起人",
                    prop: "startUserName",
                },
                {
                    label: "发起时间",
                    prop: "startTime",
                    minWidth: "150px",
                },
                {
                    label: "审核等待时间",
                    prop: "duration",
                    minWidth: "150px",
                },
            ];
        },

        /** 查询流程定义列表 */
        getList() {
            this.loading = true;
            apis?.List(this.queryParams)
                .then((response) => {
                    if (response.code == 200) {
                        this.loading = false;
                        this.definitionList = response.rows;
                        this.total = response.total;
                    }
                })
                .finally(() => (this.loading = false));
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                id: Cookies.get("userId"),
                category: null,
                businessType: "",
                businessId: null,
            };
            this.listValue = "";
            this.handleQuery();
        },

        /** 流程图查看 */
        handleReadImage(info, flag) {
            let query = {
                modelId: info?.procInstId,
                name: info.name,
                category: info.category,
                deployId: info.deploymentId,
                processId: info?.procInstId,
                taskId: info?.taskId,
                activityId: info?.activityId,
                flag: flag,
            };
            if (flag == "1") {
                query.status = "readonly";
            }
            this.$router.push({
                path: "/workflow/examine/details",
                query,
            });
        },

        /** 挂起/激活流程 */
        handleUpdateSuspensionState(row, type) {
            const params = {
                id: row.id,
                state: type,
            };
            updateState(params).then((res) => {
                this.$modal.msgSuccess(res.msg);
                this.getList();
            });
        },
    },
};
</script>
<style scoped lang="scss">
.selsctCard {
    margin-bottom: 20px;
    border-radius: 8px;

    .headBox {
        width: 100%;
        min-height: 30px;
        // height: 30px;
        line-height: 30px;
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        // justify-content: space-between;

        .headValue {
            // width: 15%;
            padding: 0 13px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        .bckColr {
            color: #fff;
            background: #1890ff;
        }
    }
}
</style>
